<template>
  <a-modal
    title="发布职位"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="false">
      <a-form :form="form">
        <a-form-item
          label="职位名称"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input v-decorator="['postName', {rules: [{required: true, max: 20, message: '职位名称最多不能超过20个字符'}]}]" />
        </a-form-item>
      </a-form>
    </a-spin>
    <a-spin :spinning="false">
      <a-form :form="form">
      <a-form-item label="职位类型" 
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
        <a-select   placeholder="请选择职位类型" v-decorator="['postType', {rules: [{required: true,  message: '请选择职位类型!'}]}]"
>
        <a-select-option :key="item.id"  v-for="item in postTypeList" :value="item.id">{{item.name}}</a-select-option>
          <!-- <a-select-option value="0">全部</a-select-option>
          <a-select-option value="1">关闭</a-select-option>
          <a-select-option value="2">运行中</a-select-option> -->
        </a-select>
      </a-form-item>
      </a-form>
    </a-spin>

    <a-spin :spinning="false">
      <a-form :form="form">
        <a-form-item
          label="职位人数"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
        
          <a-input-number :min="1" v-decorator="['postNum', {rules: [{required: true,  message: '请输入招聘人数！'}]}]" />
        </a-form-item>
      </a-form>
    </a-spin>
    <a-spin :spinning="false">
      <a-form :form="form">
      <a-form-item label="招聘企业" 
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input v-decorator="['companyName', {rules: [{required: true,  message: '请输入招聘企业！'}]}]" />
      </a-form-item>
      </a-form>
    </a-spin>
    <a-spin :spinning="false">
      <a-form :form="form">
        <a-form-item label="职位标签" 
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <!-- <div> -->
    <template v-for="tag in tags">
      <a-tooltip v-if="tag.length > 10" :key="tag" :title="tag">
        <a-tag :key="tag" :closable='true' :afterClose="() => handleClose(tag)">
          {{`${tag.slice(0, 10)}...`}}
        </a-tag>
      </a-tooltip>
      <a-tag v-else :key="tag"  :closable='true' :afterClose="() => handleClose(tag)">
        {{tag}}
      </a-tag>
    </template>
    <!-- <a-input
      v-if="inputVisible"
      ref="input1"
      type="text"
      size="small"
      :style="{ width: '78px' }"
      :value="inputValue"
      @change="handleInputChange"
      @blur="handleInputConfirm"
      @keyup.enter="handleInputConfirm"
    /> -->
    <a-modal
      title="请选择职位标签"
      :visible="modleVisible"
      @ok="handleMoelOk"
      :confirmLoading="confirmLoading"
      @cancel="handleModelCancel"
    >
    <div>
        <a-checkable-tag :key='item.text' v-for="item in welfare" v-model="item.checked" @change="handleTabChange" >{{item.text}}</a-checkable-tag>
      </div>
    </a-modal>
    <a-tag  @click="showInput" style="background: #fff; borderStyle: dashed;">
      <a-icon type="plus" /> 新增标签
    </a-tag>
  <!-- </div> -->
        </a-form-item>
      </a-form>
    </a-spin>

    <a-spin :spinning="false">
      <a-form :form="form">
        <a-form-item label="职位描述" 
   
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
              <!-- <quill-editor v-model="content"
                ref="myQuillEditor"
                :options="editorOption"
                @blur="onEditorBlur($event)"
                @focus="onEditorFocus($event)"
                @ready="onEditorReady($event)"
                placeholder='请输入职位描述'
                >请输入职位描述</quill-editor> -->
        <a-textarea
          rows="10"
          placeholder="请输入职位职责、任职要求等，建议尽量使用短句并列出，如下：
岗位职责：
  1、......
  2、......
任职要求：
  1、......
  2、......"
          v-decorator="[
            'postDes',
            {rules: [{ required: true, message: '请输入职位描述' }]}
          ]" />
        </a-form-item>
      </a-form>
    </a-spin>

   <a-spin :spinning="false">
      <a-form :form="form">
      <a-form-item label="工作经验" 
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
        <a-select   placeholder="请选择工作经验" v-decorator="['workExp', {rules: [{required: true,  message: '请选择工作经验!'}]}]">
          <a-select-option :key="item.id"  v-for="item in workExpList" :value="item.id">{{item.name}}</a-select-option>
        </a-select>
      </a-form-item>
      </a-form>
    </a-spin>
    <a-spin :spinning="false">
      <a-form :form="form">
      <a-form-item label="学历要求" 
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
        <a-select   placeholder="请选择学历要求" v-decorator="['education', {rules: [{required: true,  message: '请选择学历要求!'}]}]">
            <a-select-option :key="item.id"  v-for="item in educationList" :value="item.id">{{item.name}}</a-select-option>
        </a-select>
      </a-form-item>
      </a-form>
    </a-spin>
     <a-spin :spinning="false">
      <a-form :form="form">
      <a-form-item label="月薪范围" 
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
        <a-select   placeholder="请选择月薪范围" v-decorator="['salary', {rules: [{required: true,  message: '请选择月薪范围!'}]}]">
            <a-select-option :key="item.id"  v-for="item in salaryList" :value="item.id">{{item.name}}</a-select-option>
        </a-select>
      </a-form-item>
      </a-form>
    </a-spin>
      <a-spin :spinning="false">
      <a-form :form="form">
      <a-form-item label="工作城市" 
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
         <a-cascader :options="jobCityList" @change="onChangeJobCity" placeholder="请选择工作城市" v-decorator="['jobCity', {rules: [{required: true,  message: '请选择工作城市!'}]}]"/>
      </a-form-item>
      </a-form>
    </a-spin>
    <a-spin :spinning="false">
      <a-form :form="form">
      <a-form-item label="招聘有效期" 
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
        <a-select   placeholder="请选择招聘有效期" v-decorator="['recruitLimit', {rules: [{required: true,  message: '请选择招聘有效期!'}]}]">
            <a-select-option :key="item.id"  v-for="item in recruitLimitArr" :value="item.id">{{item.name}}</a-select-option>
        </a-select>
      </a-form-item>
      </a-form>
    </a-spin>
      <a-spin :spinning="false">
      <a-form :form="form">
        <a-form-item
          label="手机号"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input placeholder="请输入您的电话号码" v-decorator="['userPhone', {rules: [{required: true, pattern: /^1[34578]\d{9}$/, message: '请输入正确格式的电话号码'}]}]" />
        </a-form-item>
      </a-form>
    </a-spin>
    <a-spin :spinning="false">
      <a-form :form="form">
        <a-form-item
        label="悬赏金额"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        >
        <a-input-number :min="100" v-decorator="['rewards']"/>
      </a-form-item>
      </a-form>
    </a-spin>
     <a-popconfirm
      title="Are you sure delete this task?"
      :visible="confirmVisible"
      @visibleChange="handleVisibleChange"
      @confirm="confirmSucessModel"
      @cancel="cancelFailModel"
      okText="Yes"
      cancelText="No"
    >
    </a-popconfirm>
  </a-modal>
  
</template>

<script>
// import VueQuillEditor from 'vue-quill-editor'
// require styles
let searchCon;
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'


import { getPostTypeList,getWorkExpList,getEducationList,getSalaryList,getJobCityList,publishJob } from '@/api/job'
import { message } from 'ant-design-vue'
import { debuglog } from 'util';
import { timeForMatAdd } from '@/utils/util';
export default {
  components: {
    quillEditor
  },
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      },
      visible: false,
      modleVisible:false,
      confirmLoading: false,

      form: this.$form.createForm(this),
      tags: [],
      inputVisible: false,
      confirmVisible:false,
      condition:true,
      inputValue: '',
      value: 2,
      content: '',
      editorOption: {
         modules: {
            toolbar: [
              ['bold', 'italic', 'underline'],
              // ['blockquote', 'code-block'],
              // [{ 'header': 1 }, { 'header': 2 }],
              [{ 'list': 'ordered' }, { 'list': 'bullet' }],
              // [{ 'script': 'sub' }, { 'script': 'super' }],
              // [{ 'indent': '-1' }, { 'indent': '+1' }],
              // [{ 'direction': 'rtl' }],
              // [{ 'size': ['small', false, 'large', 'huge'] }],
              // [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
              // [{ 'font': [] }],
              // [{ 'color': [] }, { 'background': [] }],
              [{ 'align': [] }],
              // ['clean'],
              // ['link', 'image', 'video']
            ],
            syntax: {
              highlight: text => hljs.highlightAuto(text).value
            }
          }
       },
       postTypeList:[],
       workExpList:[],
       educationList:[],
       salaryList:[],
       welfare: [
    {
        "checked":false,
        "text":"五险一金"
    },
    {
        "checked":false,
        "text":"年底双薪"
    },
    {
        "checked":false,
        "text":"绩效奖金"
    },
    {
        "checked":false,
        "text":"年终分红"
    },
    {
        "checked":false,
        "text":"股票期权"
    },
    {
        "checked":false,
        "text":"加班补助"
    },
    {
        "checked":false,
        "text":"全勤奖"
    },
    {
        "checked":false,
        "text":"包吃"
    },
    {
        "checked":false,
        "text":"包住"
    },
    {
        "checked":false,
        "text":"交通补助"
    },
    {
        "checked":false,
        "text":"餐补"
    },
    {
        "checked":false,
        "text":"房补"
    },
    {
        "checked":false,
        "text":"通讯补助"
    },
    {
        "checked":false,
        "text":"采暖补贴"
    },
    {
        "checked":false,
        "text":"带薪年假"
    },
    {
        "checked":false,
        "text":"弹性工作"
    },
    {
        "checked":false,
        "text":"补充医疗保险"
    },
    {
        "checked":false,
        "text":"定期体检"
    },
    {
        "checked":false,
        "text":"免费班车"
    },
    {
        "checked":false,
        "text":"员工旅游"
    },
    {
        "checked":false,
        "text":"高温补贴"
    },
    {
        "checked":false,
        "text":"节日福利"
    },
    {
        "checked":false,
        "text":"创业公司"
    },
    {
        "checked":false,
        "text":"不加班"
    },
    {
        "checked":false,
        "text":"14薪"
    },
    {
        "checked":false,
        "text":"住房补贴"
    },
    {
        "checked":false,
        "text":"无试用期"
    },
    {
        "checked":false,
        "text":"免息房贷"
    },
    {
        "checked":false,
        "text":"每年多次调薪"
    },
    {
        "checked":false,
        "text":"健身俱乐部"
    },
    {
        "checked":false,
        "text":"周末双休"
    },
    {
        "checked":false,
        "text":"项目奖金"
    },
    {
        "checked":false,
        "text":"定期团建"
    },
    {
        "checked":false,
        "text":"出国游"
    },
    {
        "checked":false,
        "text":"带团队"
    },
    {
        "checked":false,
        "text":"试用期全额"
    },
    {
        "checked":false,
        "text":"公司重点项目"
    },
    {
        "checked":false,
        "text":"大牛带队"
    },
    {
        "checked":false,
        "text":"全额公积金"
    },
    {
        "checked":false,
        "text":"工作居住证"
    },
    {
        "checked":false,
        "text":"免费停车"
    }
],
    jobCityList:[],
        recruitLimitArr: [{
        id: -1,
        name: '请选择'
      },
      {
        id: 1,
        name: '1周'
      },
      {
        id: 2,
        name: '半月'
      },
      {
        id: 3,
        name: '1月'
      },
      {
        id: 4,
        name: '3月'
      },
      {
        id: 5,
        name: '长期有效'
      },
    ],
    }
  },
   mounted: function() {
    //  ?type=2&device=4&version=3900
    getPostTypeList({type:2 })
      .then(res => {
        console.info(this.postTypeList, "1")
        this.postTypeList=res.result;
        console.info(this.postTypeList, "2")
      })
      .catch((err) => {
        console.info(err)
      })


      getWorkExpList()
      .then(res => {
        this.workExpList=res.result;
      })
      .catch((err) => {
        console.info(err)
      })


      getEducationList()
      .then(res => {
        this.educationList=res.result;
      })
      .catch((err) => {
        console.info(err)
      })


      getSalaryList({device:5, version:3900 })
      .then(res => {
        this.salaryList=res.result;
      })
      .catch((err) => {
        console.info(err)
      })

      getJobCityList({device:5, version:3900 })
      .then(res => {
        this.jobCityList=res.result;
      })
      .catch((err) => {
        console.info(err)
      })

  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill
    }
  },
  methods: {
    add () {
      this.visible = true
    },

    handleSubmit () {

      const { form: { validateFields } } = this
      // console.info(form,'======1111');
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {//数据验证成功时
          console.log('values', values)
          let benefits=this.tags.join(',');
          let recruitLimitId=values.recruitLimit;
         var count = 0; //定义天数
        if (recruitLimitId == 1) {
          count = 7;
        }
        if (recruitLimitId == 2) {
          count = 15;
        }
        if (recruitLimitId == 3) {
          count = 30;
        }
        if (recruitLimitId == 4) {
          count = 90;
        }
        if (recruitLimitId == 5) {
          count = 365 * 100;
        }
           var timeForMat = timeForMatAdd(count);
          var startTime = timeForMat.t1;
        var endTime = timeForMat.t2;
          var submitData={
            userId:localStorage.getItem('userId'),
            openId:'ob-bq4uibDVlxGblsq_J8pmKEyyM',
            topicId:2,
            content:values.postDes,
            isTop:false,
            topDays:1,
            extensionType:1,
            isRed:false,
            redAmount:'',
            copies:'',
            isAverage:false,
            redCommand:'',
            imgUrls:'',
            country:'中国',
            provinceName:values.jobCity[0],
            cityName:values.jobCity[1],
            districtName:'',
            buildName:'',
            userLongitude:116.40717,
            userLatitude:39.90469,
            showBussinessIds:'',
            phone:values.userPhone,
            positionId:values.postType,
            postTitle:values.postName,
            number:values.postNum,
            benefits:benefits,
            salaryType:values.salary,
            startTime: startTime,
            endTime :endTime,
            province:values.jobCity[0],
            city:values.jobCity[1],
            district:'',
            company:values.companyName,
            workExperience:values.workExp,
            education:values.education,
            device:5,
            version:3900,

          };
          if(values.rewards){
            submitData.bounty=values.rewards;
          }
          
          

      publishJob(submitData)
      .then(res => {
        if(res.code==1){
          // this.$emit('ok', values)
            this.visible = false
            this.confirmLoading = false
        }
      })
      .catch((err) => {
        this.confirmLoading = false,
        console.info(err)
      })
    
        } else {
          this.confirmLoading = false
        }
      })
    },

    confirmSucessModel () {
      this.confirmVisible = false
      message.success('Next step.')
    },
    cancelFailModel () {
      this.confirmVisible = false
      message.error('Click on cancel.')
    },
    handleVisibleChange (confirmVisible) {
      if (!confirmVisible) {
        this.confirmVisible = false
        return
      }
      // Determining condition before show the popconfirm.
      console.log(this.condition)
      if (this.condition) {
        this.confirm() // next step
      } else {
        this.confirmVisible = true
      }
    },
    handleCancel () {
      this.visible = false
      this.handleReset();
    },
    //新增标签
    showInput () {
       const that = this
       let welfare=that.welfare;
       for(var i=0;i<welfare.length;i++){
         if(that.tags.some(v => v == welfare[i].text)){
           welfare[i].checked=true;
         }else{
            welfare[i].checked=false;
         }
       }
       that.welfare=welfare;
     
       that.modleVisible=true
      // this.inputVisible = true
      // this.$nextTick(function () {
      //   debugger
      //   console.info(that.$refs)
      //   that.$refs.input1.focus()
      // })
    },
    handleInputChange (e) {
      this.inputValue = e.target.value
    },

    handleInputConfirm () {
      const inputValue = this.inputValue
      let tags = this.tags
      if (inputValue && tags.indexOf(inputValue) === -1) {
        tags = [...tags, inputValue]
      }
      console.log(tags)
      Object.assign(this, {
        tags,
        inputVisible: false,
        inputValue: '',
      })
    },
    handleClose (removedTag) {
      const tags = this.tags.filter(tag => tag !== removedTag)
      console.log(tags)
      this.tags = tags
    },
    onEditorBlur(quill) {
      console.log('editor blur!', quill)
    },
    onEditorFocus(quill) {
      console.log('editor focus!', quill)
    },
    onEditorReady(quill) {
      console.log('editor ready!', quill)
    },
    onEditorChange({ quill, html, text }) {
      console.log('editor change!', quill, html, text)
      this.content = html
    },
    showModal() {
      this.visible = true
    },
    handleMoelOk(e) {
      var tags=[];
      this.welfare.forEach((v,i)=>{
           if(v.checked){
            tags.push(v.text);
          }
      })

      this.tags=tags;
      this.confirmLoading = false;
      this.modleVisible = false;
    },
    handleModelCancel(e) {
      console.log('Clicked cancel button');
      this.modleVisible = false
    },

    handleTabChange(checked){
       console.log(checked);
    },
    onChangeJobCity(){
    },

    handleReset () {
      debugger
        this.form.resetFields();
    },
    
  }
}
</script>